<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>Happy Homes Admin</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		
		<meta name="_csrf" content="${_csrf.token}"/>
    	<meta name="_csrf_header" content="${_csrf.headerName}"/>
    
		<!-- Bootstrap styles -->
		<link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>
		<!-- bootstrap file upload -->
		<link rel="stylesheet" href="<c:url value="/resources/FileUpload/css/jquery.fileupload.css"/>"/>
		<link rel="stylesheet" href="<c:url value="/resources/FileUpload/css/jquery.fileupload-ui.css"/>"/>
		<!-- / bootstrap file upload -->
		
		<!-- Custom CSS -->
	    <link href="<c:url value="/resources/admin/css/sb-admin.css"/>" rel="stylesheet"/>
	
	    <!-- Custom Fonts -->
	    <link href="<c:url value="/resources/admin/font-awesome-4.1.0/css/font-awesome.min.css"/>" rel="stylesheet" type="text/css"/>
	    
	    <script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>
	    
	    <script type="text/javascript">
		    /* function back to list */
			function backToList(){
				document.location.href = "${pageContext.request.contextPath}/admin/rooms/list";
			}
	    </script>
	</head>
	<body>
	<div id="wrapper">

        <!-- Navigation -->
        <%@ include file="/WEB-INF/pages/admin/navigation.jsp" %>

        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Upload Image for ${roomName }
                        </h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Dashboard
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> NEW ROOM</h3>
                            </div><!-- panel-heading -->
                            <div class="panel-body">
                            	<div class="row">
                            		<form id="fileupload" method="post" enctype="multipart/form-data">
								        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
								        <div class="row fileupload-buttonbar">
								            <div class="col-lg-7 col-lg-offset-1">
								                <!-- The fileinput-button span is used to style the file input field as button -->
								                <span class="btn btn-success fileinput-button">
								                    <i class="glyphicon glyphicon-plus"></i>
								                    <span>Add files...</span>
								                    <input type="file" name="files[]" multiple/>
								                </span>
								                <button type="submit" class="btn btn-primary start">
								                    <i class="glyphicon glyphicon-upload"></i>
								                    <span>Start upload</span>
								                </button>
								                <button type="reset" class="btn btn-warning cancel">
								                    <i class="glyphicon glyphicon-ban-circle"></i>
								                    <span>Cancel upload</span>
								                </button>
								                <button type="button" class="btn btn-danger delete">
								                    <i class="glyphicon glyphicon-trash"></i>
								                    <span>Delete</span>
								                </button>                
								            </div>
								            <!-- The global progress state -->
								            <div class="col-lg-5 fileupload-progress fade">
								                <!-- The global progress bar -->
								                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
								                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
								                </div>
								                <!-- The extended global progress state -->
								                <div class="progress-extended">&nbsp;</div>
								            </div>
								        </div>
								        <!-- The table listing the files available for upload/download -->
								        <input type="hidden" id="roomIdValue" name="roomIdValue" value="${roomId }"/>
								        <table role="presentation" class="table table-striped">
									        <tbody class="files">
									        	<c:if test="${not empty images}">
									        		<c:forEach var="image" items="${images}">
									        			<tr class="template-download fade in">
													        <td>
													            <span class="preview">
												                    <a href="${image.url }" title="${image.name }" download="${image.name }" data-gallery="">
												                    	<img src="${image.thumbnailUrl }"/>
												                    </a>
													            </span>
													        </td>
													        <td>
													            <p class="name">
												                    <a href="${image.url }" title="${image.name }" download="${image.name }" data-gallery="">${image.name }</a>
													            </p>
													        </td>
													        <td>
													            <span class="size">${image.size }</span>
													        </td>
													        <td>
												                <button class="btn btn-danger delete" data-type="DELETE" 
												                	data-url="${image.deleteUrl }?${_csrf.parameterName}=${_csrf.token}">
												                    <i class="glyphicon glyphicon-trash"></i>
												                    <span>Delete</span>
												                </button>
												                <input type="checkbox" name="delete" value="1" class="toggle"/>
													        </td>
													    </tr>
									        		</c:forEach>
									        	</c:if>
									        </tbody>
								        </table>
								    </form>
                    			</div><!-- /row -->
                			</div><!-- /panel-body -->
                         </div><!-- panel panel-default -->
                     </div><!-- col-lg-12 -->
                </div><!-- /row -->
                
                <div class="row">
                	<div class="container">
	                	<button type="submit" class="btn btn-default col-lg-1" onclick="backToList()">
							<spring:message code="message.ExitButton" text="default text" />
						</button>
					</div>
                </div>
            </div><!-- /container-fluid -->

          </div><!-- /page-wrapper -->

        </div><!-- /#wrapper -->
	<!-- The template to display files available for upload -->
	<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
	</script>
	<!-- The template to display files available for download -->
	<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}?${_csrf.parameterName}=${_csrf.token}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
	</script>
	<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function () {
	    'use strict';
	
	    // Initialize the jQuery File Upload widget:
	    $('#fileupload').fileupload({
	        // Uncomment the following to send cross-domain cookies:
	        //xhrFields: {withCredentials: true},
	        url: '${pageContext.request.contextPath}/admin/images/uploadImages?${_csrf.parameterName}=${_csrf.token}'
	    });
	
	    // Enable iframe cross-domain access via redirect option:
	    $('#fileupload').fileupload(
	        'option',
	        'redirect',
	        window.location.href.replace(
	            /\/[^\/]*$/,
	            '/cors/result.html?%s'
	        )
	    );
	
	    if (window.location.hostname === 'blueimp.github.io') {
	        // Demo settings:
	        $('#fileupload').fileupload('option', {
	            url: '//jquery-file-upload.appspot.com/',
	            // Enable image resizing, except for Android and Opera,
	            // which actually support image resizing, but fail to
	            // send Blob objects via XHR requests:
	            disableImageResize: /Android(?!.*Chrome)|Opera/
	                .test(window.navigator.userAgent),
	            maxFileSize: 5000000,
	            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
	        });
	        // Upload server status check for browsers with CORS support:
	        if ($.support.cors) {
	            $.ajax({
	                url: '//jquery-file-upload.appspot.com/',
	                type: 'HEAD'
	            }).fail(function () {
	                $('<div class="alert alert-danger"/>')
	                    .text('Upload server currently unavailable - ' +
	                            new Date())
	                    .appendTo('#fileupload');
	            });
	        }
	    } else {
	        // Load existing files:
	        $('#fileupload').addClass('fileupload-processing');
	        $.ajax({
	            // Uncomment the following to send cross-domain cookies:
	            //xhrFields: {withCredentials: true},
	            url: $('#fileupload').fileupload('option', 'url'),
	            dataType: 'json',
	            context: $('#fileupload')[0]
	        }).always(function () {
	            $(this).removeClass('fileupload-processing');
	        }).done(function (result) {
	            $(this).fileupload('option', 'done')
	                .call(this, $.Event('done'), {result: result});
	        });
	    }
	
	});
	</script>
	<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
	<script src="<c:url value="/resources/FileUpload/js/vendor/jquery.ui.widget.js"/>"></script>
	<!-- The Templates plugin is included to render the upload/download listings -->
	<script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
	<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
	<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js"></script>
	<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
	<script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>
	<!-- blueimp Gallery script -->
	<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
	<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
	<script src="<c:url value="/resources/FileUpload/js/jquery.iframe-transport.js"/>"></script>
	<!-- The basic File Upload plugin -->
	<script src="<c:url value="/resources/FileUpload/js/jquery.fileupload.js"/>"></script>
	<!-- The File Upload processing plugin -->
	<script src="<c:url value="/resources/FileUpload/js/jquery.fileupload-process.js"/>"></script>
	<!-- The File Upload image preview & resize plugin -->
	<script src="<c:url value="/resources/FileUpload/js/jquery.fileupload-image.js"/>"></script>
	<!-- The File Upload validation plugin -->
	<script src="<c:url value="/resources/FileUpload/js/jquery.fileupload-validate.js"/>"></script>
	<!-- The File Upload user interface plugin -->
	<script src="<c:url value="/resources/FileUpload/js/jquery.fileupload-ui.js"/>"></script>
	<!-- The main application script -->
	<script src="<c:url value="/resources/FileUpload/js/main.js"/>"></script>
	</body> 
</html>
